<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>住院患者详情</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <!--分页需要的样式开始-->
    <style>
        /*分页*/
        .page-bar {
            margin: 40px auto;
            margin-top: 150px;

        }

        ul, li {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none
        }

        .page-bar li:first-child > a {
            margin-left: 0px
        }

        .page-bar a {
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #5D6062;
            cursor: pointer;
            margin-right: 20px;
        }

        .page-bar a:hover {
            background-color: #eee;
        }

        .page-bar a.banclick {
            cursor: not-allowed;
        }

        .page-bar .active a {
            color: #fff;
            cursor: default;
            background-color: #E96463;
            border-color: #E96463;
        }

        .page-bar i {
            font-style: normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }
    </style>
    <!--分页需要的样式结束-->
</head>
<body>
<div id="app">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="height: 100px">

        </div>
        <div class="layui-card-body">

            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>患者名字</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>入院时间</th>
                    <th>出院时间</th>
                    <th>医生名字</th>
                    <th>病床编号</th>
                    <th>病床类型</th>
                    <th>病房位置</th>
                    <th>病床价格</th>
                    <th>家属姓名</th>
                    <th>家属电话</th>
                    <th>患者住址</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{inpatient.inpatientName}}</td>
                    <td>{{inpatient.patient.patientGender}}</td>
                    <td>{{inpatient.patient.patientAge}}</td>
                    <td v-text="dateFormat(inpatient.inDate,'yyyy-MM-dd hh:mm:ss')"></td>
                    <td v-text="dateFormat(inpatient.outDate,'yyyy-MM-dd hh:mm:ss')"></td>
                    <td>{{inpatient.empDoc.empName}}</td>
                    <td>{{inpatient.bed.bedId}}</td>
                    <td>{{inpatient.bed.note}}</td>
                    <td>{{inpatient.bed.room.location}}</td>
                    <td>{{inpatient.bed.room.bedPrice}}</td>
                    <td>{{inpatient.inpatientFamlilyName}}</td>
                    <td>{{inpatient.inpatientFamlilyTel}}</td>
                    <td>{{inpatient.patient.address}}</td>
                    <td>
                        <a href="#" @click="toSurgery()" class="layui-btn">手术详情</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <br/>
        </div>
    </div>
</div>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            inpatient: {},
            inpatientId: ''
        },
        created() {
            //生命周期函数，已初始化就调用加载数据方法
            this.getData();
        },
        methods: {
            getData: function () {
                let inpatientId = this.getUrlKey("inpatientId");
                this.inpaientId = inpatientId;
                var that = this;
                axios.get("http://localhost:8080/inpatient/getInpatientById?inpatientId=" + inpatientId).then(function (resp) {
                    that.inpatient = resp.data.data;
                });
            },
            toInpatient: function (inpatientInd) {
                location.href = "inpatient.html?inpatientId=" + inpatientId;
            },
            toSurgery: function () {
                // alert("跳转到手术详情界面或者住控制台，住院患者id：" + this.inpaientId)
                window.location.href = "../surgery/surgeryexe.html";
            },
            getUrlKey: function (name) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                //匹配目标参数
                var r = window.location.search.substr(1).match(reg);
                //返回参数
                if (r != null) {
                    return unescape(r[2]);
                } else {
                    return null;
                }
            },
            dateFormat: function (value, fmt) {
                let getDate = new Date(value);
                let o = {
                    'M+': getDate.getMonth() + 1,
                    'd+': getDate.getDate(),
                    'h+': getDate.getHours(),
                    'm+': getDate.getMinutes(),
                    's+': getDate.getSeconds(),
                    'q+': Math.floor((getDate.getMonth() + 3) / 3),
                    'S': getDate.getMilliseconds()
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
                }
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                    }
                }
                return fmt;
            }
        }
    })
</script>
</body>
</html>